package com.bawei.composeui2207a.day02

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.bawei.composeui2207a.R

/**
 * 作者：赵亮
 * 时间：2024/12/11 15:56
 * 功能：左右滑动页面
 */
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun Page11() {
    val list = listOf(
        R.drawable.profile_picture,
        R.drawable.sunwukong,
        R.drawable.zhubajie
    )
    // HorizontalPager的状态
    val state = rememberPagerState {
        list.size
    }


    Box {
        HorizontalPager(state = state, modifier = Modifier.fillMaxSize()) {        // 横向滑动
            Image(
                modifier = Modifier.fillMaxSize(),
                contentScale = ContentScale.Crop,
                painter = painterResource(id = list[it % list.size]), contentDescription = null
            )
        }
        // 小圆点
        Row(
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .padding(bottom = 30.dp),
            horizontalArrangement = Arrangement.spacedBy(10.dp)
        ) {
            repeat(state.pageCount) {
                Box(
                    modifier = Modifier
                        .size(width = 30.dp, height = 10.dp)
                        .clip(CircleShape)
                        .background(color = if (state.currentPage == it) Color.Red else Color.Gray)
                ) {

                }
            }
        }

        if (state.currentPage == list.size - 1) {
            Button(
                onClick = { /*TODO*/ },
                modifier = Modifier
                    .align(Alignment.BottomCenter)
                    .padding(bottom = 50.dp)
            ) {
                Text(text = "立即体验")
            }
        }
    }


    /*VerticalPager(state = state) {          // 纵向滑动
        Image(
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Crop,
            painter = painterResource(id = list[it]), contentDescription = null
        )
    }*/

}

@Preview
@Composable
fun Page11Preview() {
    Page11()
}

